<template>
  <view
    class="content ba_img"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#eeeeee"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">一田</view>
    </view>
    <view class="tabs_box">
      <u-tabs
        class="tabs"
        :list="list1"
        :current="currentIndex"
        @click="tabClick"
        :activeStyle="{
          color: '#eee',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          'font-size': '32rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }"
        lineColor="#eee"
        :inactiveStyle="{
          color: '#ADADAD',
          transform: 'scale(1)',
          'font-size': '32rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }"
      ></u-tabs>
    </view>
    <scroll-view
      :style="{
        height: scrollHeihgt + 'px',
      }"
      :scroll-y="true"
      :scroll-top="scrollTop"
      @scroll="scroll"
    >
      <view
        :style="{ padding: '32rpx 30rpx', color: 'white' }"
        v-if="currentIndex == 0"
        v-html="content"
      >
        <!-- <introduce
          :content="content"
          v-if="currentIndex == 0"
        ></introduce> -->
      </view>

      <view
        :style="{ padding: '32rpx 30rpx', color: 'white' }"
        v-if="currentIndex == 1"
        v-html="content"
      >
        <!-- <introduce
          :content="content"
          v-if="currentIndex == 1"
        ></introduce> -->
      </view>

      <seek v-if="currentIndex == 2" :wendao="wendao"></seek>
      <offlineActivities
        v-if="currentIndex == 3"
        :huodong="huodong"
      ></offlineActivities>
      <traveler v-if="currentIndex == 4" :list="xingzhe"></traveler>
      <Perception v-if="currentIndex == 5" :list="ganwu"></Perception>
      <view :style="{ height: '100rpx' }"></view>
    </scroll-view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import introduce from "./components/introduce";
import seek from "./components/seek";
import offlineActivities from "./components/offlineActivities.vue";
import traveler from "./components/traveler.vue";
import Perception from "./components/Perception.vue";
import {
  yitianjieshao,
  yanxuedagang,
  zixunwendao,
  xianxiahuodong,
  xingzhegushi,
  yanxueganwu,
} from "@/common/api/yitian.js";
export default {
  components: {
    introduce,
    seek,
    offlineActivities,
    traveler,
    Perception,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      list1: [
        {
          name: "一田介绍",
        },
        {
          name: "研学大纲",
        },
        {
          name: "咨询问道",
        },
        {
          name: "线下活动",
        },
        {
          name: "行者故事",
        },
        {
          name: "研学感悟",
        },
      ],
      currentIndex: 0,
      scrollHeihgt: 0,
      scrollTop: 0,
      jieshao: {},
      yanxue: {},
      wendao: {},
      huodong: {},
      xingzhe: [],
      ganwu: [],
      content: "",
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".tabs_box").fields({
        size: true,
      });

      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeihgt = windowHeihgt - sum - this.statusBarHeight;
      });
    });
  },
  onLoad(options) {
    if(options.index){
      this.currentIndex = Number(options.index)
      
      if(options.index == 4){
        this.xingzheList()
      } else if(options.index == 5){
        this.ganwuList()
      }
    } else {
      this.getYitian();
    }
    
  },
  methods: {
    getYitian() {
      yitianjieshao()
        .then((res) => {
          this.content = res.data.info.content;
        })
        .catch((err) => {
          this.$u.toast(err);
        });
    },
    getYanxiu() {
      yanxuedagang()
        .then((res) => {
          this.content = res.data.info.content;
        })
        .catch((err) => {
          this.$u.toast(err);
        });
    },
    getZixun() {
      zixunwendao().then((res) => {
        this.wendao = res.data.data;
      });
    },
    getXianxia() {
      xianxiahuodong().then((res) => {
        console.log("ressssss活动", res);
        this.huodong = res.data.data;
      });
    },
    ganwuList() {
      yanxueganwu().then((res) => {
        this.ganwu = res.data.list;
        console.log("reeeeessss感悟", this.ganwu);
      });
    },
    xingzheList() {
      xingzhegushi().then((res) => {
        console.log("ressssss行者", res);
        this.xingzhe = res.data.list.data;
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    scroll(e) {
      // this.scrollTop = e.detail.scrollTop;
    },
    tabClick(e) {
      this.currentIndex = e.index;
      if (e.index == 0) {
        this.getYitian();
      } else if (e.index == 1) {
        this.getYanxiu();
      } else if (e.index == 2) {
        this.getZixun();
      } else if (e.index == 3) {
        this.getXianxia();
      } else if (e.index == 4) {
        this.xingzheList();
      } else if (e.index == 5) {
        this.ganwuList();
      }
      this.scrollTop = 0;
    },
  },
};
</script>

<style scoped lang="scss">
.ba_img {
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  box-sizing: border-box;
  position: fixed;
}

.head {
  width: 100%;
  padding: 18rpx 0 47rpx;
  position: fixed;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}

.box {
  width: 100%;
}
</style>